<template>
  <div class="root-layout">
    <!-- titleBar -->
    <u-navbar
      height="50"
      title="分享产品"
      @leftClick="onBack"
      :autoBack="true"
    ></u-navbar>
    <div class="content-layout">
      <u-line></u-line>
      <!-- 海报内容 -->
      <div class="poster-root-layout">
        <div ref="content" class="poster-layout">
          <!-- 海报 -->
          <div class="poster-img">
            <!-- 背景 -->
            <img id="poster" style="width: 100%" :src="curPosterImg" alt="" />
            <!-- 海报元素1 -->
            <div
              v-if="curPosterTag === 1"
              style="width: 100%; height: 100%; position: absolute"
            >
              <view class="poster1-msg-text1">{{
                posterMessage.productName
              }}</view>
              <view class="poster1-msg-text2">{{
                posterMessage.productSlogan
              }}</view>
              <view class="poster1-msg-text3"
                >最高额度{{ posterMessage.maxQuota }}万</view
              >
              <span class="poster1-msg-text4"
                >年化利率：<span style="color: black"
                  >{{ posterMessage.minRate }}%起</span
                ></span
              >
              <span class="poster1-msg-text5"
                >最长期限：<span style="color: black"
                  >{{ posterMessage.maxPeriods }}期</span
                ></span
              >
              <span class="poster1-msg-text6"
                >还款方式：<span style="color: black">{{
                  posterMessage.newRepaymentType
                }}</span></span
              >
            </div>
            <!-- 海报元素2 -->
            <div
              v-if="curPosterTag === 2"
              style="width: 100%; height: 100%; position: absolute"
            >
              <view class="poster2-msg-text1 poster2-msg-text1-shape">{{
                posterMessage.productName
              }}</view>
              <view class="poster2-msg-text1">{{
                posterMessage.productName
              }}</view>
              <view class="poster2-msg-text2">{{
                posterMessage.productSlogan
              }}</view>
              <view class="poster2-msg-text3"
                >最高额度<view style="margin-top: 4px; color: #ffd593">
                  {{ posterMessage.maxQuota }}万</view
                >
              </view>
              <view class="poster2-msg-text4"
                >月费率<view style="margin-top: 4px; color: #ffd593"
                  >{{ posterMessage.minRate }}%起
                </view>
              </view>
              <view class="poster2-msg-text5"
                >最长期限<view style="margin-top: 4px; color: #ffd593">
                  {{ posterMessage.maxPeriods }}期</view
                >
              </view>
              <span class="poster2-msg-text6"
                >还款方式：{{ posterMessage.newRepaymentType }}</span
              >
            </div>
            <!-- 海报元素3 -->
            <div
              v-if="curPosterTag === 3"
              style="width: 100%; height: 100%; position: absolute"
            >
              <view class="poster3-msg-text1">{{
                posterMessage.productName
              }}</view>
              <view class="poster3-msg-text2">{{
                posterMessage.productSlogan
              }}</view>
              <view class="poster3-msg-text3">最高额度</view>
              <view class="poster3-msg-text3 poster3-msg-text3-right"
                >{{ posterMessage.maxQuota }}万</view
              >
              <view class="poster3-msg-text4"
                >月费率<view style="margin-top: 4px; color: #ffd593"
                  >{{ posterMessage.minRate }}%起
                </view>
              </view>
              <view class="poster3-msg-text5">最长期限</view>
              <view class="poster3-msg-text5 poster3-msg-text5-right"
                >{{ posterMessage.maxPeriods }}期</view
              >
              <span class="poster3-msg-text6"
                >还款方式：{{ posterMessage.newRepaymentType }}</span
              >
            </div>
            <!-- 海报元素4 -->
            <div
              v-if="curPosterTag === 4"
              style="width: 100%; height: 100%; position: absolute"
            >
              <view class="poster4-msg-text1 poster4-msg-text1-shape">{{
                posterMessage.productName
              }}</view>
              <view class="poster4-msg-text1">{{
                posterMessage.productName
              }}</view>
              <view class="poster4-msg-text2">{{
                posterMessage.productSlogan
              }}</view>
              <span class="poster4-msg-text3"
                >最高额度<span
                  style="margin-top: 4px; margin-left: 5px; color: #f05a42"
                  >{{ posterMessage.maxQuota }}万</span
                ></span
              >
              <span class="poster4-msg-text4"
                >年化利率<span
                  style="margin-top: 4px; margin-left: 5px; color: #f05a42"
                  >{{ posterMessage.minRate }}%起</span
                ></span
              >
              <span class="poster4-msg-text5"
                >最长期限<span
                  style="margin-top: 4px; margin-left: 5px; color: #f05a42"
                  >{{ posterMessage.maxPeriods }}期</span
                ></span
              >
              <span class="poster4-msg-text6"
                >还款方式<span style="color: #f05a42; margin-left: 5px">{{
                  posterMessage.newRepaymentType
                }}</span></span
              >
            </div>
            <!-- 海报元素5 -->
            <div
              v-if="curPosterTag === 5"
              style="width: 100%; height: 100%; position: absolute"
            >
              <view class="poster5-msg-text1">{{
                posterMessage.productName
              }}</view>
              <view class="poster5-msg-text2 poster5-msg-text2-shape"
                >最高额度{{ posterMessage.maxQuota }}万</view
              >
              <view class="poster5-msg-text2"
                >最高额度{{ posterMessage.maxQuota }}万</view
              >
              <view class="poster5-msg-text3">{{
                posterMessage.productSlogan
              }}</view>
              <span class="poster5-msg-text4"
                >年化利率：{{ posterMessage.minRate }}%起</span
              >
              <span class="poster5-msg-text5"
                >最长期限：{{ posterMessage.maxPeriods }}期</span
              >
              <span class="poster5-msg-text6"
                >还款方式：<span style="font-size: 13px">{{
                  posterMessage.newRepaymentType
                }}</span></span
              >
            </div>
          </div>
          <!-- 信息 -->
          <div class="poster-msg">
            <div class="poster-head-bg">
              <u--image
                bgColor="#f05f5d"
                :src="posterMessage.imgUrl ? posterMessage.imgUrl : defaultHead"
                shape="circle"
                width="60"
                height="60"
              ></u--image>
            </div>
            <div style="margin-left: 10px">
              <view
                style="
                  padding: 0px;
                  margin-left: 20px;
                  align-items: center;
                  display: flex;
                  flex-direction: row;
                "
              >
                <view :style="getStyle()">{{ posterMessage.realName }}</view>
                <view
                  style="font-size: 14px; margin-left: 20px; font-weight: 600"
                  >向您推荐</view
                >
              </view>
              <view
                style="
                  font-size: 14px;
                  margin-left: 10px;
                  margin-left: 20px;
                  margin-top: 10px;
                  font-weight: 600;
                "
                >手机号码：{{ posterMessage.phone }}</view
              >
            </div>
          </div>
        </div>

        <!-- 海报模板列表 -->
        <u-loadmore
          loadmoreText="请选择海报模版"
          color="#f05f5d"
          lineColor="#f05f5d"
          line
        />
        <div class="poster-list">
          <div v-for="(item, index) in listData" :key="index">
            <img
              class="poster-list-item"
              style="margin-right: 10px"
              :src="item.temp"
              alt=""
              @click="onTempClick(item.tag, item.url)"
            />
          </div>
        </div>
        <!-- test 测试 -->
        <!-- <img :src="imageSrc" v-if="imageSrc" style="width: 100%; position: absolute;" @click="imageSrc = ''" /> -->
      </div>
      <!-- 按钮 -->
      <div class="button-layout">
        <button class="button" @click="onShare()">分享</button>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";

import poster1 from "@/static/poster1.png";
import poster2 from "@/static/poster2.png";
import poster3 from "@/static/poster3.png";
import poster4 from "@/static/poster4.png";
import poster5 from "@/static/poster5.png";
import posterTemp1 from "@/static/poster_temp1.png";
import posterTemp2 from "@/static/poster_temp2.png";
import posterTemp3 from "@/static/poster_temp3.png";
import posterTemp4 from "@/static/poster_temp4.png";
import posterTemp5 from "@/static/poster_temp5.png";
import mineApi from "@/api/mine";
import passData from "@/api/requstUtil";
import jweixin from "weixin-js-sdk";
export default {
  data() {
    return {
      defaultHead: "", // 默认头像
      curPosterImg: poster1, // 当前显示的海报
      curPosterTag: 1, // 当前海报标识
      posterMessage: {}, // 海报元素内容
      listData: [
        {
          tag: 1,
          temp: posterTemp1,
          url: poster1,
        },
        {
          tag: 2,
          temp: posterTemp2,
          url: poster2,
        },
        {
          tag: 3,
          temp: posterTemp3,
          url: poster3,
        },
        {
          tag: 4,
          temp: posterTemp4,
          url: poster4,
        },
        {
          tag: 5,
          temp: posterTemp5,
          url: poster5,
        },
      ], // 海报数组
      imageSrc: "", // 生成的海报图片-base64
      productData: {},
    };
  },
  onLoad(option) {
    const eventChannel = this.getOpenerEventChannel();
    let that = this;
    eventChannel.on("accepShareData", function (data) {
      console.log("分享", data);
      that.productData = {
        ...data,
      };
    });
  },
  created() {
    this.defaultHead = "../../../static/icon_head_man.png";
    this.getMineData();
  },
  methods: {
    // 获取个人信息
    async getMineData() {
      console.log("productData", this.productData);
      try {
        const res = await mineApi.postQueryInfoData();
        let data = passData(res);
        if (data) {
          this.posterMessage = { ...this.productData, ...data };
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 获取不同样式
    getStyle() {
      let color = "";
      switch (this.curPosterTag) {
        case 1:
          color = "#F65825";
          break;
        case 2:
          color = "#936DDE";
          break;
        case 3:
          color = "#D70501";
          break;
        case 4:
          color = "#FC463A";
          break;
        case 5:
          color = "#397BF4";
          break;
        default:
          color = "#F65825";
          break;
      }
      let style = {
        fontSize: "18px",
        fontWeight: "bold",
        color: color,
      };
      return style;
    },
    // 分享
    onShare() {
      console.log("分享");
      // uni.navigateTo({
      //     url: "/pages/index/product/ShareMini",
      //     success: (res) => {
      //       res.eventChannel.emit("accepShareMiniData", {...this.posterMessage,curPosterTag: this.curPosterTag, curPosterImg: this.curPosterImg} );
      //     },
      //   });
    },
    // 点击模板
    onTempClick(tag, url) {
      console.log(222, url);
      this.curPosterImg = url;
      const dom = document.getElementById("poster");
      // onload监听，判断图片是否加载完成
      let _this = this;
      dom.onload = function () {
        console.log("图片加载成功");
        _this.curPosterTag = tag;
      };
    },
    // 生成海报图片
    generateImage() {
      const content = this.$refs.content;
      html2canvas(content)
        .then((canvas) => {
          this.imageSrc = canvas.toDataURL("image/png"); // 将Canvas转换为图片数据
          console.log("生成的图片", this.imageSrc);
        })
        .catch((error) => {
          console.error("生成图片失败", error);
        });
    },
  },
  watch: {
    curPosterTag() {
      jweixin.miniProgram.postMessage({
        //wxSdk为微信sdk
        data: {
          imgUrl: this.posterMessage.imgUrl,
          realName: this.posterMessage.realName,
          phone: this.posterMessage.phone,
          productName: this.posterMessage.productName,
          productSlogan: this.posterMessage.productSlogan,
          maxQuota: this.posterMessage.maxQuota,
          maxPeriods: this.posterMessage.maxPeriods,
          newRepaymentType: this.posterMessage.newRepaymentType,
          curPosterImg: this.curPosterImg,
          curPosterTag: this.curPosterTag,
          flag: "2",
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.root-layout {
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  .content-layout {
    height: calc(100vh - 50px);
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;

    .poster-root-layout {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;

      .poster-layout {
        border: solid 1px #efefef;
        display: flex;
        margin-top: 30px;
        flex-direction: column;
        align-items: center;
        width: calc(100% - 60px);
        position: relative;

        .poster-img {
          display: flex;
          flex-direction: columns;
          width: 100%;
          position: relative;
        }

        .poster-msg {
          width: 100%;
          background: white;
          height: calc(100% / 7);
          display: flex;
          flex-direction: row;
          position: absolute;
          bottom: 0;
          align-items: center;
          justify-content: center;

          .poster-head-bg {
            background: #e7e7e7;
            border: solid #e7e7e7 1px;
            border-radius: 50%;
          }
        }
      }

      .poster-list {
        width: calc(100vw - 20px);
        padding-left: 10px;
        padding-right: 10px;
        display: flex;
        overflow-x: scroll;
        flex-direction: row;

        .poster-list-item {
          width: 120px;
        }
      }
    }

    .button-layout {
      padding: 10px;
      background: white;
    }
  }

  // ================================================= 海报元素1 =================================================
  .poster1-msg-text1 {
    width: 100%;
    text-align: center;
    left: 50%;
    transform: translate(-50%, 30%);
    letter-spacing: 2px;
    font-size: 42px;
    color: white;
    font-weight: 950;
    font-style: oblique;
    letter-spacing: 2px;
    position: absolute;
  }

  .poster1-msg-text2 {
    left: 50%;
    top: 13%;
    width: 100%;
    text-align: center;
    letter-spacing: 1px;
    transform: translate(-50%, 50%);
    position: absolute;
    color: white;
    font-size: 18px;
    font-weight: 950;
  }

  .poster1-msg-text3 {
    left: 50%;
    bottom: 42.2%;
    letter-spacing: 3px;
    transform: translate(-50%, 50%);
    position: absolute;
    color: #f65825;
    font-size: 18px;
    font-weight: 950;
  }

  .poster1-msg-text4 {
    left: 20%;
    bottom: 27.7%;
    position: absolute;
    color: #f65825;
    font-size: 12px;
    font-weight: 800;
  }

  .poster1-msg-text5 {
    left: 20%;
    bottom: 23.6%;
    position: absolute;
    color: #f65825;
    font-size: 12px;
    font-weight: 800;
  }

  .poster1-msg-text6 {
    left: 20%;
    bottom: 19.3%;
    position: absolute;
    color: #f65825;
    font-size: 12px;
    font-weight: 800;
  }

  // ================================================= 海报元素2 =================================================
  .poster2-msg-text1 {
    width: 100%;
    left: 50%;
    transform: translate(-50%, 50%);
    font-size: 42px;
    text-align: center;
    color: #7e54cf;
    letter-spacing: 3px;
    position: absolute;
    font-family: fengguangmingruiti;
  }

  .poster2-msg-text1-shape {
    color: white;
    transform: translate(-50% + 0.5, 50%);
  }

  .poster2-msg-text2 {
    width: 100%;
    left: 50%;
    bottom: 42.5%;
    transform: translate(-50%, 50%);
    font-size: 14px;
    text-align: center;
    color: white;
    letter-spacing: 1px;
    position: absolute;
  }

  .poster2-msg-text3 {
    left: 52.5%;
    bottom: 29%;
    display: flex;
    font-weight: 550;
    flex-direction: column;
    align-items: center;
    transform: translate(-50%, 0%);
    font-size: 12px;
    text-align: center;
    color: white;
    letter-spacing: 1px;
    position: absolute;
  }

  .poster2-msg-text4 {
    left: 15%;
    bottom: 29%;
    display: flex;
    font-weight: 550;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    text-align: center;
    color: white;
    letter-spacing: 1px;
    position: absolute;
  }

  .poster2-msg-text5 {
    right: 10%;
    bottom: 29%;
    display: flex;
    font-weight: 550;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    text-align: center;
    color: white;
    letter-spacing: 1px;
    position: absolute;
  }

  .poster2-msg-text6 {
    width: 100%;
    left: 50%;
    bottom: 27%;
    transform: translate(-50%, 50%);
    font-size: 12px;
    text-align: center;
    color: #ffd593;
    letter-spacing: 1px;
    position: absolute;
  }

  // ================================================= 海报元素3 =================================================
  .poster3-msg-text1 {
    left: 50%;
    top: 49%;
    transform: translate(-50%, 0);
    letter-spacing: 2px;
    font-size: 22px;
    color: #df3c26;
    font-weight: 950;
    letter-spacing: 2px;
    position: absolute;
  }
  .poster3-msg-text2 {
    width: 100%;
    text-align: center;
    top: 21%;
    letter-spacing: 2px;
    font-size: 16px;
    color: white;
    font-weight: bold;
    position: absolute;
  }

  .poster3-msg-text3 {
    left: 26.5%;
    bottom: 40.1%;
    letter-spacing: 2px;
    font-size: 14px;
    color: white;
    letter-spacing: 2px;
    position: absolute;
    font-weight: bold;
  }

  .poster3-msg-text3-right {
    color: #d70600;
    left: 55%;
    bottom: 39.8%;
    font-size: 16px;
  }

  .poster3-msg-text4 {
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 3.5%;
    transform: translate(-50%, 0);
    letter-spacing: 2px;
    font-size: 35px;
    color: #fdf0b4;
    letter-spacing: 2px;
    position: absolute;
    font-style: oblique;
    font-family: hangyixiaobohuayue;
  }

  .poster3-msg-text5 {
    left: 26.5%;
    bottom: 33%;
    letter-spacing: 2px;
    font-size: 16px;
    color: #d70600;
    letter-spacing: 2px;
    position: absolute;
    font-weight: 600;
  }

  .poster3-msg-text5-right {
    color: #d70600;
    left: 55%;
    transform: translate(0, 10%);
    font-size: 20px;
    font-weight: bold;
  }

  .poster3-msg-text6 {
    width: 100%;
    text-align: center;
    bottom: 25%;
    letter-spacing: 2px;
    font-size: 14px;
    color: black;
    letter-spacing: 2px;
    position: absolute;
    font-weight: bold;
  }

  // ================================================= 海报元素4 =================================================
  .poster4-msg-text1 {
    top: 12%;
    left: 50%;
    transform: translate(-50%, 0);
    letter-spacing: 2px;
    font-size: 50px;
    color: white;
    font-weight: 950;
    letter-spacing: 2px;
    position: absolute;
  }

  .poster4-msg-text1-shape {
    color: #ba1408;
    transform: translate(-50% + 2, -2%);
  }

  .poster4-msg-text2 {
    top: 7.5%;
    width: 100%;
    text-align: center;
    letter-spacing: 2px;
    font-size: 16px;
    color: #fdf0b4;
    letter-spacing: 2px;
    position: absolute;
  }

  .poster4-msg-text3 {
    bottom: 34.5%;
    left: 63.5%;
    font-weight: 550;
    letter-spacing: 2px;
    font-size: 12px;
    color: black;
    letter-spacing: 2px;
    position: absolute;
  }

  .poster4-msg-text4 {
    bottom: 34.5%;
    left: 15.5%;
    font-weight: 550;
    letter-spacing: 2px;
    font-size: 12px;
    color: black;
    letter-spacing: 2px;
    position: absolute;
  }

  .poster4-msg-text5 {
    bottom: 29.8%;
    left: 15.5%;
    font-weight: 550;
    letter-spacing: 2px;
    font-size: 12px;
    color: black;
    letter-spacing: 2px;
    position: absolute;
  }

  .poster4-msg-text6 {
    bottom: 25%;
    left: 15.5%;
    font-weight: 550;
    letter-spacing: 2px;
    font-size: 12px;
    color: black;
    letter-spacing: 2px;
    position: absolute;
  }

  // ================================================= 海报元素5 =================================================
  .poster5-msg-text1 {
    font-size: 16px;
    color: white;
    right: 8.6%;
    font-weight: 600;
    top: 2.2%;
    letter-spacing: 1px;
    position: absolute;
  }

  .poster5-msg-text2 {
    width: 100%;
    left: 50%;
    top: 7%;
    transform: translate(-50%, 50%);
    font-size: 30px;
    text-align: center;
    color: white;
    letter-spacing: 3px;
    position: absolute;
    font-family: douyuzhuiguangti;
  }

  .poster5-msg-text2-shape {
    transform: translate(-50% + 1, 50% - 6);
    color: rgb(76, 91, 209);
  }

  .poster5-msg-text3 {
    width: 100%;
    left: 50%;
    top: 16.5%;
    transform: translate(-50%, 50%);
    font-size: 16px;
    text-align: center;
    color: white;
    letter-spacing: 1px;
    position: absolute;
  }

  .poster5-msg-text4 {
    color: #155bf7;
    left: 27%;
    top: 26.9%;
    letter-spacing: 1px;
    position: absolute;
    font-size: 13px;
    font-weight: 950;
  }

  .poster5-msg-text5 {
    color: #155bf7;
    left: 27%;
    top: 31.4%;
    letter-spacing: 1px;
    position: absolute;
    font-size: 13px;
    font-weight: 950;
  }

  .poster5-msg-text6 {
    color: #155bf7;
    left: 27%;
    top: 35.9%;
    letter-spacing: 1px;
    position: absolute;
    font-size: 13px;
    font-weight: 950;
  }
}
</style>